// 订单列表
<template>
	<view class="container">
		<view class="header">
			<!-- 搜索框 -->
			<image class="seach-img" src="../../static/manghe/sort.png" mode="aspectFill" @click="toggleSortOrder()">
			</image>
			<!-- @click="orderlisty" -->
			<view class="search-input-wrapper">
				<!-- <text class="iconfont icon-search"></text> -->
				<input type="text" icon="search" v-model="key" placeholder="搜索订单" @input="getOrderList()"
					placeholder-class="placeholder" />
			</view>
			<!-- <SortBar @setSort="setSort" @setType="setType" :defaultItemType="itemType" v-if="isShowSortBar"></SortBar> -->
			<!-- <view class="guess-title" v-else>猜你喜欢</view> -->
			<view class="filter-container">
				<!-- 筛选按钮 -->
				<view class="filter-header" @click="toggleDropdown">
					<svg t="1706081762581" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4220" width="32" height="32">
						<path
							d="M675.328 117.717333a21.333333 21.333333 0 0 1-16.341333 39.402667A382.762667 382.762667 0 0 0 512 128C299.925333 128 128 299.925333 128 512s171.925333 384 384 384 384-171.925333 384-384c0-51.114667-9.984-100.8-29.12-146.986667a21.333333 21.333333 0 0 1 39.402667-16.341333A425.429333 425.429333 0 0 1 938.666667 512c0 235.648-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333c56.746667 0 112 11.093333 163.328 32.384zM682.666667 384H362.666667l106.666666 142.229333v220.309334a21.333333 21.333333 0 1 1-42.666666 0.064v-206.165334L328.533333 409.6c-24.682667-32.896-7.104-68.266667 34.026667-68.266667h320.213333c41.130667 0 58.794667 35.264 34.026667 68.266667L618.666667 540.437333V640a21.333333 21.333333 0 1 1-42.666667-0.064v-113.706667L682.666667 384z"
							fill="#fff" p-id="4221"></path>
					</svg>
				</view>
			</view>
		</view>
		<view class="" v-if="activeIndex == 0" class="residue">
			<!-- 头部订单状态选项卡 -->
			<view class="header-tabs">
				<view class="tab-item" v-for="(item, index) in typeTextList" :key="index"
					:class="{ active: current == index }" :data-current="index" @tap="currentChange">
					<text class="text">
						{{ item }}
						<!-- 如果存在statusTotal[types[index]]就显示该值 -->
						<template v-if="statusTotal[types[index]]">({{ statusTotal[types[index]] }})</template>
					</text>
				</view>
			</view>
			<!-- 视图组件 -->
			<view class="swiper-wrapper">
				<!-- Swiper是一个轮播组件 -->
				<swiper :current="current" @change="currentChange2">
					<swiper-item v-for="(item, index) in types" :key="index">
						<!-- scroll-view滚动视图组件 -->
						<scroll-view scroll-y @scrolltolower="scrolltolower">
							<!-- order-list订单项列表，每个订单项显示了订单的相关信息 -->
							<view class="order-list">
								<OrderItem @check="checkItem(order)" :isSelectMode="isSelectMode"
									:isSelected="selectedIds.indexOf(order.id) > -1"
									v-for="order in dataList[index].list" :order="order" :key="order.uuid"
									@action="actions"></OrderItem>
								<view class="load-more margin-v"
									v-if="dataList[index].list.length < dataList[index].item_total">
									加载中...</view>
								<view style="height: 80vh;overflow: hidden;"
									v-if="dataList[index].init && !dataList[index].list.length">
									<NoData tips="无订单"></NoData>
								</view>

							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 盲盒订单 -->
		<view class="" v-if="activeIndex == 1" class="residue">
			<view class="showdeliverySkusList">
				<view class="itemListBox">
					<view class="tabList">
						<view :class="{ active: activeTab === i }" v-for="(item,i) in tabList" :key="i"
							@click="getTabList(i)">
							{{item}}
						</view>
					</view>
					<view v-if="deliverySkusList.length == 0" style="height: 70vh;overflow: hidden;">
						<NoData></NoData>
					</view>
					<view class="itemList" v-else>
						<view v-for="(item, index) in deliverySkusList" :key="index" class="item daditem">
							<view class="img">
								<img :src="item.detailImages" alt="" />
							</view>
							<view class="datas">
								<h2>{{ item.name }}</h2>
								<p v-if="item.source == 1"><b>物品来源</b>个人赏</p>
								<p v-else-if="item.source == 2"><b>物品来源</b>无限赏</p>
								<p v-else-if="item.source == 3"><b>物品来源</b>一番赏</p>
								<p v-else-if="item.source == 4"><b>物品来源</b>一元夺宝</p>
								<p v-else-if="item.source == 5"><b>物品来源</b>转让</p>
								<p v-else-if="item.source == 6"><b>物品来源</b>系统赠送</p>
								<p v-else-if="item.source == 7"><b>物品来源</b>玩家赠送</p>
								<p v-else-if="item.source == 8"><b>物品来源</b>签到奖励</p>
								<p class="price"><b>参考价格</b>{{ item.moneyPrice }}</p>
								<p><b>获取时间</b>{{ item.createTime }}</p>
								<p v-if="item.orderNumber"><b>订单编号</b>{{ item.orderNumber }}</p>
								<p v-if="item.trackNumber"><b>快递单号</b>{{ item.trackNumber }}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="footer-c" v-if="current == 0 && !orderConfig.is_hide_deliver_btn">
			<button class="cancel-btn bg-cancel" v-if="isSelectMode" hover-class="hover" @tap="cancelSelect">取消选择</button>
			<button class="select-box-btn bg-orange" hover-class="hover" @tap="selectOrSubmit">
				<template v-if="!isSelectMode">
					选择盒子发货
				</template>
				<template v-else>
					确认提交发货 (已选{{selectedIds.length}}件)
				</template>
			</button>
		</view> -->
		<!-- 
		<IActionSheet :visible="visible" @change="cancelOrder" :list="reasons"
			title="选择理由">
		</IActionSheet> -->

		<PayCard v-if="isShowPay" :selectedId="selectedIds" @success="successDeliver" @cancel="isShowPay = false">
		</PayCard>

		<ReturnSalePopupOld @cancel="isShowReturnSalePopup = false" @refresh="refresh" :uuid="currentUuid"
			v-if="isShowReturnSalePopup"></ReturnSalePopupOld>

		<!-- 下拉框 -->
		<view v-if="isDropdownVisible" class="dropdown">
			<text class="dropdown-sift">订单筛选</text>
			<text class="dropdown-time">下单时间：</text>
			<!-- 下单时间选项 -->
			<view class="time-options">
				<button class="option" :class="{ active: selectedTimeRange === '1' }" @click="selectOrderTime('1')">
					<text>近1个月</text>
				</button>
				<button class="option" :class="{ active: selectedTimeRange === '3' }" @click="selectOrderTime('3')">
					<text>近3个月</text>
				</button>
				<button class="option" :class="{ active: selectedTimeRange === '6' }" @click="selectOrderTime('6')">
					<text>近6个月</text>
				</button>
			</view>

			<!-- 起始时间-终止时间下拉框 -->
			<view class="time-range">
				<picker mode="date" @change="onStartDateChange" :start="startDate" :end="endDate">
					<view class="data">
						<input type="text" v-model="startDate" placeholder="起始时间" />
						<!-- <text>起始时间: </text> -->
					</view>
				</picker>
				<text class="line"> — </text>
				<picker mode="date" @change="onEndDateChange" :start="startDate" :end="endDate">
					<view class="data">
						<input type="text" v-model="endDate" placeholder="终止时间" />
						<!-- <text>终止时间: {{endDate}}</text> -->
					</view>
				</picker>
			</view>

			<!-- 重置和确认按钮 -->
			<view class="button-container">
				<button class="reset-button" @click="resetFilter">
					<text>重置</text>
				</button>
				<button class="confirm-button" @click="confirmFilter">
					<text>确认</text>
				</button>
			</view>
		</view>
		<view v-if="isDropdownVisible" class="mask" @click="closeDropdown"></view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<ul class="selectList">
				<li v-for="(item,index) in selectList" :key="index" :class="activeIndex == index ? 'active' : ''"
					@click="switchModel(index)">{{item.name}}</li>
			</ul>
		</uni-popup>
	</view>
</template>

<script>
	import OrderItem from "./components/OrderItem.vue";
	import IActionSheet from "../../components/ActionSheet/index.vue";
	import PayCard from "./components/PayCard.vue"
	import payment from "@/utils/payment.js";
	import {
		deliverySkus,
		alreadyDelivery,
	} from "@/api/myBox.js";
	export default {
		components: {
			OrderItem,
			IActionSheet,
			PayCard
		},
		data() {
			return {
				order: {},
				reasons: [],
				visible: false,
				dataList: [],
				current: 0,
				currentUuid: '6056e83ef3251',
				types: ["pay_pending", "deliver_pending", "delivered", "all"],
				typeTextList: ['待付款', '待发货', '待收货', '全部'],
				// 盲盒订单相关
				activeTab: 0,
				tabList: ["待发货", "已发货"],
				deliverySkusList: [],
				skuname: "",

				isSelectMode: false,
				selectedIds: [],
				isShowPay: false,
				isShowReturnSalePopup: false,
				isRefresh: false,
				statusTotal: {},
				isDropdownVisible: false,
				startDate: '',
				endDate: '',
				selectedTimeRange: '',
				key: "",
				selectList: [{
						name: "商品订单"
					},
					{
						name: "盲盒订单"
					},
				],
				activeIndex: 0,
			}
		},
		computed: {
			orderConfig() {
				return this.$store.getters.setting.order
			},
		},
		onLoad(e) {
			this.current = this.types.indexOf(e.status || 'pending')
			// this.initData()
			// this.getOrderList()
			this.initData()
			this.$api.emit('order.cancel_reason.list').then(res => {
				this.reasons = res.data.list
			})
			uni.$on('postCommentSuccess', res => {
					this.initData()
					this.getOrderList()
				}),
				this.initTotalData()
			// this.$http('/zb-order/stat', "GET").then(res => {
			// 	this.statusTotal = res.data.info
			// 	console.log(res.data.info);
			// })
		},
		onShow() {
			this.refresh();
			this.resetFilter();
			this.getTabList(0)
		},
		onUnload() {
			uni.$off('postCommentSuccess', data => {
				console.log('移除postCommentSuccess 自定义事件');
			})
		},
		methods: {
			// 盲盒发货
			getTabList(i) {
				this.activeTab = i ? i : 0;
				if (this.activeTab == 0) {
					deliverySkus({
						status: 5,
						skuname: this.skuname,
						startTime: this.startDate,
						endTime: this.endDate,
					}).then(res => {
						if (res.code === 200) {
							this.deliverySkusList = res.data;

							// 选中得数组清空
							this.selectedItems = [];
						} else if (res.message == "暂无数据") {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
							});
							this.deliverySkusList = [];
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
							});
						}
					})
				} else {
					alreadyDelivery({
						status: 7,
						skuname: this.skuname,
						startTime: this.startDate,
						endTime: this.endDate,
					}).then(res => {
						if (res.code === 200) {
							this.deliverySkusList = res.data
						} else if (res.message == "结果为空") {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
							});

						} else {
							this.deliverySkusList = [];
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
							});
						}
					})
				}

			},
			toggleDropdown() {
				this.isDropdownVisible = !this.isDropdownVisible;
			},
			selectOrderTime(timeRange) {
				this.selectedTimeRange = timeRange;
				// 在这里执行选择下单时间的其他逻辑
				// this.isDropdownVisible = false; // 关闭下拉框
			},
			onStartDateChange(event) {
				this.startDate = event.mp.detail.value;
			},
			onEndDateChange(event) {
				this.endDate = event.mp.detail.value;
			},
			resetFilter() {
				// 重置逻辑
				this.startDate = '';
				this.endDate = '';
				this.selectedTimeRange = '';
			},
			confirmFilter() {
				// 确认逻辑
				this.isDropdownVisible = false; // 关闭下拉框
				this.getOrderList();
				this.resetFilter()
			},
			closeDropdown() {
				this.isDropdownVisible = false;
				this.resetFilter()
			},
			initTotalData() {
				this.$http('/zb-order/stat', "GET").then(res => {
					this.statusTotal = res.data.info
					console.log(res.data.info);
				})
				// this.$http('/order-stat').then(res => {
				// 	this.statusTotal = res.data.info
				// })
			},
			orderlisty() {
				uni.navigateTo({
					url: '/pages/orderList/sortBar'
				})
			},
			successDeliver() {
				this.cancelSelect()
				this.current = 2
				this.refresh()
				this.isShowPay = false
				uni.showModal({
					title: '发货成功',
					content: '已成功提交发货请求，请注意查收快递哦~'
				})
			},
			cancelSelect() {
				this.isSelectMode = false
				this.selectedIds = []
			},
			selectOrSubmit() {
				if (!this.isSelectMode) {
					this.isSelectMode = true
				} else {
					if (this.selectedIds.length == 0) {
						uni.showModal({
							title: '请选择盒子',
							content: '选择一个或多个盒子后才能提交发货哦~'
						})
						return false
					}

					this.isShowPay = true
				}
			},
			checkItem(order) {
				let index = this.selectedIds.indexOf(order.id)
				if (index > -1) {
					this.selectedIds.splice(index, 1)
				} else {
					this.selectedIds.push(order.id)
				}
			},
			refresh() {
				this.isRefresh = true
				this.cleanData()
				this.getOrderList()
				this.initTotalData()
			},
			scrolltolower() {
				this.dataList[this.current].page++
				this.getOrderList()
			},
			initData() {
				let dataList = []
				this.types.forEach(item => {
					dataList.push({
						list: [],
						type: item,
						page: 1,
						per_page: 50,
						total: 0,
						init: false,
						loading: false
					})
				})
				this.dataList = dataList
			},
			cleanData() {
				this.dataList.forEach(item => {
					item.page = 1
					item.init = false
				})
			},
			// 取消订单接口修改
			cancelOrder(e) {
				// this.visibleChange()
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let itemList = this.dataList[this.current]
				this.$http(`/zb-order/cancelTheOrder/${this.order.uuid}`,
					'GET').then(res => {
					console.log(res);
					uni.showToast({
						title: '已提交取消请求~',
						icon: 'none'
					})
					this.initData()
					this.dataList[this.current].init = true
					this.getOrderList()
					this.initTotalData()
				}).catch(err => {
					uni.hideLoading()
				})
				// this.$api.emit('order.close', this.order.uuid).then(res => {
				// 	this.$api.emit('order.list', {
				// 		status: itemList.type,
				// 		page: 1,
				// 		per_page: itemList.per_page
				// 	}).then(res => {
				// 		uni.hideLoading()
				// 		uni.showToast({
				// 			title: '已提交取消请求~',
				// 			icon: 'none'
				// 		})
				// 	})
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
			},
			// visibleChange() {
			// 	this.visible = !this.visible
			// },
			payOrder(uuid) {
				uni.showLoading({
					mask: true
				})
				this.$http('/zb-order/payScore', "post", {
					uuid: uuid,
					type: 1
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: "支付成功",
							icon: "none"
						})
						this.initData()
						this.dataList[this.current].init = true
						this.getOrderList()
						this.initTotalData()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})


				// payment.pay({
				// 	pay_config: res.data.pay_config,
				// 	success: () => {

				// 		this.refresh()
				// 	},
				// 	faild: () => {

				// 	}
				// })
			},
			actions(e) {
				switch (e.action) {
					case '立即支付':
						this.payOrder(e.order.uuid)
						// uni.navigateTo({
						// 	url: '/pages/payCenter/index?uuid=' + e.order.uuid
						// })
						break;
					case '取消订单':
						this.order = e.order
						this.cancelOrder()
						break;
					// case '返售':
					// 	this.currentUuid = e.order.uuid
					// 	this.isShowReturnSalePopup = true
					// 	break;
					case '删除订单':
						uni.showModal({
							title: "提示",
							content: "确认要删除订单吗?",
							success: res => {
								if (res.confirm) {
									uni.showLoading({
										title: '加载中',
										mask: true
									})
									this.$api.emit('order.destory', e.order.uuid).then(res => {
										this.initData()
										this.getOrderList()
									})
								}
							}
						})
						break;
					case '提醒发货':
						break;
					case '确认收货':
						uni.showModal({
							title: "提示",
							content: "订单确认收货?",
							success: res => {
								if (res.confirm) {
									uni.showLoading({
										title: '加载中',
										mask: true
									})
									this.$http(`/zb-order/cofOrder/${e.order.uuid}`, "put", ).then(res => {
										uni.hideLoading()
										// uni.navigateTo({
										// 	url: '/pages/writeComment/index?uuid=' + e.order.uuid
										// })
										this.initData()
										this.dataList[this.current].init = true
										this.getOrderList()
										this.initTotalData()
									})
								}
							}
						})
						break;
					case '去评价':
						uni.navigateTo({
							url: '/pages/writeComment/index?uuid=' + e.order.uuid
						})
						break;
					case '核销码':
						uni.navigateTo({
							url: '/pages/orderCode/index?uuid=' + e.order.uuid
						})
						break;
					default:
						break;
				}
			},
			currentChange(e) {
				let index = e.currentTarget.dataset.current
				if (index !== this.current) {
					this.current = index
					let itemList = this.dataList[this.current]
					console.log(itemList)
					console.log(itemList.type);
					console.log(itemList.page);
					console.log(itemList.per_page);
					if (!itemList.init) {
						this.getOrderList()
					}
				}
			},
			currentChange2(e) {
				console.log(e);

				let index = e.detail.current
				if (index !== this.current) {
					this.current = index
					let itemList = this.dataList[this.current]
					if (!itemList.init) {
						this.getOrderList()
					}
				}

			},
			getOrderList() {
				let itemList = this.dataList[this.current]
				// if (itemList.loading) return
				// itemList.loading = true
				console.log(itemList);
				this.$http("/zb-order/list", 'GET', {
					status: itemList.type,
					page: itemList.page,
					per_page: itemList.per_page,
					key: this.key,
					recentlyTime: this.selectedTimeRange,
					startTime: this.startDate,
					endTime: this.endDate
				}).then(res => {
					console.log(res);
					if (res.data.current_page === 1) {
						itemList.list = res.data.list
						console.log(itemList.list);
					} else {
						itemList.list.push(...res.data.list)
					}

					itemList.total = res.data.item_total
					itemList.init = true
				})
				// if (!itemList.init) {
				// 	uni.showLoading({
				// 		title: '加载中',
				// 		mask: true
				// 	})
				// }
				// this.$api.emit('order.list', {
				// 	status: itemList.type,
				// 	page: itemList.page,
				// 	per_page: itemList.per_page
				// }).then(res => {
				// 	// uni.hideLoading()
				// 	itemList.loading = false

				// 	if (res.data.current_page === 1) {
				// 		itemList.list = res.data.list
				// 	} else {
				// 		itemList.list.push(...res.data.list)
				// 	}

				// 	itemList.total = res.data.item_total
				// 	itemList.init = true
				// })
			},
			toggleSortOrder() {
				this.$refs.popup.open('bottom')
			},
			switchModel(index) {
				this.activeIndex = index
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
	}

	.container {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
} */
	.showdeliverySkusList {
		flex: 1;
		display: flex;
		flex-direction: column;
	}


	.itemListBox {
		// width: 100%;
		// max-height: 1000rpx;
		// overflow: scroll;
		width: 100%;
		// height: 150rpx;
		// display: flex;
		// align-items: center;
		// position: fixed;
		// top: 140rpx;
		// left: 0;
		// z-index: 10;
		flex: 1;
		display: flex;
		flex-direction: column;

		.tabList {
			width: 200rpx;
			color: white;
			display: flex;
			height: 50rpx;
			font-size: 30rpx;
			padding: 0 20rpx;
			margin: 20rpx 30rpx 20rpx 0;
			justify-content: space-between;

			.active {
				color: rgb(108, 67, 255);
			}
		}

		.itemList {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			flex: 1;
			overflow-y: auto;

			.daditem {
				margin-bottom: 30rpx;
				background: url(../../static/boxCard.png) center/ cover no-repeat;
				border: 2rpx solid rgb(108, 67, 255);
				box-sizing: border-box;
			}

			.unitem {
				background: #1a1724;
			}

			.item {
				width: 100%;
				border-radius: 5rpx;
				height: 260rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;

				.check {
					transform: scale(0.8);
				}

				.img {
					width: 150rpx;
					height: 150rpx;
					margin-left: 20rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					overflow: hidden;
					background-image: -webkit-linear-gradient(-45deg, rgb(91, 184, 152), rgb(227, 240, 239), rgb(91, 184, 152));
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						background-color: #151515;
					}
				}

				.datas {
					width: 424rpx;
					height: 220rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #ececec;
					font-weight: 100;
					margin-left: 20rpx;
					font-size: 25rpx;

					.price {
						color: #ececec;
					}

					b {
						font-weight: 100;
						color: #858585;
						margin-right: 10rpx;
					}

					h2 {
						font-size: 28rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.lock {
					position: absolute;
					right: 30rpx;
					text-align: center;

					view {
						margin-top: 16rpx;
					}
				}
			}

			.uni-collapse {
				margin: 20rpx 0;
			}

			&.colStyle {
				::v-deep .uni-collapse-item__wrap-content::after {
					visibility: hidden;
					display: block;
					font-size: 0;
					content: " ";
					clear: both;
					height: 0;
				}

				.item {
					display: block;
					position: relative;
					width: calc(50% - 20rpx);
					float: left;
					height: auto;
					padding-bottom: 20rpx;
					border: 1px solid purple;
					box-sizing: border-box;
					margin: 10rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.check {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					z-index: 2;
				}

				.img {
					width: 260rpx;
					height: 260rpx;
					margin: 0 auto;
					border-radius: 5rpx;

					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						border-radius: 5rpx;
						background-color: #151515;
					}
				}

				.lock {
					position: absolute;
					top: 180rpx;
					right: 10rpx;
				}
			}
		}
	}

	.filter-container {
		position: relative;
		z-index: 999;
	}

	.filter-header {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.line {
		color: #fff;
		font-weight: 900;
	}

	.arrow-icon {
		width: 20px;
		height: 20px;
		margin-left: auto;
		transition: transform 0.3s ease;
	}

	/* .rotate {
	transform: rotate(180deg);
} */

	.dropdown {
		height: 600rpx;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		/* position: fixed; */
		position: absolute !important;
		/* 将 fixed 改为 absolute */
		/* 修改这里 */
		/* top: 100%; */
		bottom: 0;
		display: block;
		/* 添加这一行 */
		/* width: 100%; */
		background-color: #000 !important;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 999;
		display: flex;
		flex-direction: column;
	}

	.dropdown-sift {
		margin: 0 auto;
		font-size: 40rpx;
		font-weight: 900;
		padding-bottom: 20rpx;
		color: #fff;
	}

	.dropdown-time {
		font-weight: 100;
		margin-left: 20px;
		margin-bottom: 20rpx;
		font-size: 38rpx;
		color: #fff;
	}

	.time-options {
		width: 100%;
		/* border: 1rpx solid black; */
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-evenly;
	}

	.data {
		// margin-top: 30rpx;
		// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
		border: 5rpx solid rgb(184, 155, 255);
		color: #fff;
		font-weight: 100;
		height: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		padding: 0 30rpx;

		input {
			font-size: 35rpx;
			color: #fff;
		}
	}

	.option {
		width: 30%;
		/* height: 80rpx; */
		padding: 20rpx;
		cursor: pointer;
		height: 80rpx;
		/* white-space: nowrap;
	display: inline-block; */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: #1a1724;
		color: #fff;
		box-sizing: border-box;
		border: 5rpx solid rgb(184, 155, 255);


		text {
			font-size: 35rpx;
		}

		&.active {
			background: url(../../static/seach.png) center/ cover no-repeat;
			color: #fff;
			border: 0;
		}
	}

	.time-range {
		height: 80rpx;
		/* border: 1rpx solid black; */
		padding: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button-container {
		/* padding-top: 250rpx; */
		/* padding-bottom: 20rpx; */
		width: 90%;
		border-radius: 50rpx;
		margin: auto;
		/* border: 1rpx solid black; */
		display: flex;
		justify-content: space-between;
	}

	.reset-button {
		width: 50%;
		height: 80rpx;
		color: #fff;
		// border-bottom-left-radius: 20px;
		// border-top-left-radius: 20px;
		border-radius: 50rpx 0 0 50rpx;
		background: url(../../static/seach.png) center/ cover no-repeat;

		text {
			line-height: 80rpx;
			font-size: 38rpx;
		}
	}

	.confirm-button {
		width: 50%;
		height: 80rpx;
		color: #fff;
		// border-bottom-right-radius: 20px;
		// border-top-right-radius: 20px;
		border-radius: 0 50rpx 50rpx 0;
		background: url(../../static/seach.png) center/ cover no-repeat;

		text {
			line-height: 80rpx;
			font-size: 38rpx;
		}
	}




	.header {
		padding-top: 30rpx;
		box-sizing: border-box;
		// position: fixed;
		width: 90%;
		margin: 0 auto;
		// left: 5%;
		// top: 0;
		// @include border-bottom;
		// z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.arrow-icon {
			width: 90rpx;
			height: 90rpx;
			z-index: 999;
			background-image: url(../../static/sift.png);
			background-size: 90rpx;
			background-repeat: no-repeat;
			background-position: center;
		}

		.search-input-wrapper {
			height: 90rpx;
			border-radius: 20rpx;
			width: 500rpx;
			background-color: #fff;
			padding: 0 30rpx;
			font-weight: 100;
			display: flex;
			align-items: center;

			.icon-search {
				margin-right: 10rpx;
				color: #B3B3B3;
				z-index: 999;
			}

			input {
				background-color: transparent;
				padding: 0;
				height: 100%;
				line-height: 70rpx;
			}
		}

		// .guess-title {
		//  font-weight: bold;
		//  padding: 50rpx 0rpx;
		// }
	}

	button {
		padding: 0;
		margin: 0;
		// margin-left: 20rpx;
		// width: 150rpx;
		// height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		border-radius: 1000px;
		position: relative;

		&.bg-white {
			box-shadow: 0 2rpx 8rpx #cfcfcf;
		}

		&:after {
			border: none;
		}
	}

	.footer-c {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		left: 0rpx;
		padding: 0rpx 30rpx;
		display: flex;
		box-sizing: border-box;
	}

	.select-box-btn {
		font-size: 28rpx;
		flex-grow: 1;
		padding: 20rpx 0rpx;
		text-align: center;
	}

	.cancel-btn {
		width: 200rpx;
		flex: 0 0 200rpx;
		margin-right: 30rpx;
		padding: 20rpx 0rpx;
		text-align: center;
	}

	.header-tabs {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		// top: 80rpx;
		// left: 0;
		z-index: 10;
		// background-color:#222;

		.tab-item {
			flex: 1;
			// line-height: 200rpx;
			text-align: center;
			font-size: 33rpx;
			color: #FFF;
			font-weight: 100;
			// margin-top: 50rpx;

			&.active {
				color: #fff;
				position: relative;

				.text {
					border-bottom: 6rpx solid rgb(232, 117, 148);
					color: #fff;
					font-weight: 100;
					padding: 0rpx 0rpx 10rpx 0rpx;
				}

				// &::after {
				// 	content: "";
				// 	position: absolute;
				// 	height: 2px;
				// 	left: 20rpx;
				// 	right: 20rpx;
				// 	bottom: 0;
				// 	background-color: #0E151D;
				// }
			}
		}
	}

	.swiper-wrapper {
		width: 100%;
		// height: 100%;
		// position: fixed;
		// top: 80rpx;
		// left: 0;
		flex:1;
		box-sizing: border-box;
		// padding-top: 90rpx;
		overflow: hidden;

		swiper,
		scroll-view {
			width: 100%;
			height: 100%;

			.order-list {
				overflow: hidden;
				padding: 0 30rpx 0rpx 30rpx;

				.load-more {
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #888;
				}
			}
		}
	}

	.seach-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.selectList {
		padding: 40rpx 20rpx;

		li {
			list-style: none;
			text-align: center;
			font-size: 32rpx;
			line-height: 56rpx;
			height: 56rpx;
		}

		.active {
			background-color: #ecf5ff;
			color: #409eff;
		}
	}
	.residue{
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
</style>